@tailwind base;
@tailwind components;
@tailwind utilities;


/* 
  @layer：用于将自定义样式归类到 base、components 或 utilities 层级，确保样式优先级和一致性。
  @apply：用于将多个工具类组合成一个自定义类，减少重复代码。
*/

/* 下划线动画 */
@layer components {
  .underline-animation {
    @apply relative no-underline;
    /* 基础样式 */
  }

  .underline-animation::after {
    @apply content-[''] absolute left-1/2 bottom-[-3px] w-0 h-[2px] bg-primary rounded-[6px] transition-all duration-200 transform -translate-x-1/2;
    /* 伪元素样式 */
  }

  .underline-animation:hover::after {
    @apply w-full;
    /* 悬停效果 */
  }
}

/* 选中效果 */
@layer components {

  /* 文字颜色 */
  .animate-to-end {
    @apply text-primary hover:text-primary !important;
  }

  /* 动画定格在最后的状态 */
  .animate-to-end::after {
    @apply w-full;
  }

  /* 保持最终状态，忽略 hover */
  .animate-to-end:hover::after {
    @apply w-full;
  }
}

/* 设置滚动条样式 */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  /* 滚动条宽度 */
  height: var(--scrollbar-width);
  /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
  /* 轨道背景颜色 */
  border-radius: 6px;
  /* 轨道圆角 */
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  /* 滑块颜色 */
  border-radius: 6px;
  /* 滑块圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
  /* 滑块悬停颜色 */
}


html {
  scroll-behavior: smooth;
  /* 平滑滚动 */
  /* Firefox 兼容 */
  scrollbar-width: thin;
  /* 滚动条宽度 */
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  /* 滑块颜色 轨道颜色 */
}

/* 
  HSL 颜色模式
  HSL 是一种描述颜色的方式，包含三个参数：
    - H（Hue，色相）：取值范围是 0-360，表示颜色的基本色调（如红色、绿色、蓝色等）。
    - S（Saturation，饱和度）：取值范围是 0% - 100%，表示颜色的鲜艳程度。0% 是灰色，100% 是完全饱和的颜色。
    - L（Lightness，亮度）：取值范围是 0% - 100%，表示颜色的明暗程度。0% 是黑色，100% 是白色，50% 是正常颜色。
  使用方式：background-color: hsl(var(--background)); 
*/
@layer base {
  :root {

    --theme-color: #409EFF;

    /* 背景颜色 - 白色 */
    --background: 0 0% 100%;

    /* 前景颜色 - 深灰色（用于文字） */
    --foreground: 222.2 84% 4.9%;

    /* 卡片背景颜色 - 白色 */
    --card: 0 0% 100%;

    /* 卡片前景颜色 - 深灰色（用于卡片内的文字） */
    --card-foreground: 222.2 84% 4.9%;

    /* 弹出层背景颜色 - 白色 */
    --popover: 0 0% 100%;

    /* 弹出层前景颜色 - 深灰色（用于弹出层内的文字） */
    --popover-foreground: 222.2 84% 4.9%;

    /* 主色 - 蓝色 */
    --primary: 221.2 83.2% 53.3%;

    /* 主色前景颜色 - 浅灰色（用于主色上的文字） */
    --primary-foreground: 210 40% 98%;

    /* 次色 - 浅灰色 */
    --secondary: 210 40% 96.1%;

    /* 次色前景颜色 - 深灰色（用于次色上的文字） */
    --secondary-foreground: 222.2 47.4% 11.2%;

    /* 弱化背景颜色 - 浅灰色 */
    --muted: 210 40% 96.1%;

    /* 弱化前景颜色 - 灰色（用于辅助文字） */
    --muted-foreground: 215.4 16.3% 46.9%;

    /* 强调背景颜色 - 浅灰色 */
    --accent: 210 40% 96.1%;

    /* 强调前景颜色 - 深灰色（用于强调文字） */
    --accent-foreground: 222.2 47.4% 11.2%;

    /* 警示色 - 红色 */
    --destructive: 0 84.2% 60.2%;

    /* 警示前景颜色 - 浅灰色（用于警示文字） */
    --destructive-foreground: 210 40% 98%;

    /* 边框颜色 - 浅灰色 */
    --border: 214.3 31.8% 91.4%;

    /* 输入框背景颜色 - 浅灰色 */
    --input: 214.3 31.8% 91.4%;

    /* 聚焦环颜色 - 蓝色 */
    --ring: 221.2 83.2% 53.3%;

    /* 圆角半径 - 0.5rem */
    --radius: 0.5rem;

    --scrollbar-width: 10px;
    --scrollbar-track-color: #f1f1f1;
    --scrollbar-thumb-color: #888;
    --scrollbar-thumb-hover-color: #555;
  }

  .dark {
    --theme-color: #409EFF;

    /* 背景颜色 - 深灰色 */
    --background: 222.2 84% 4.9%;

    /* 前景颜色 - 浅灰色（用于文字） */
    --foreground: 210 40% 98%;

    /* 卡片背景颜色 - 深灰色 */
    --card: 222.2 84% 4.9%;

    /* 卡片前景颜色 - 浅灰色（用于卡片内的文字） */
    --card-foreground: 210 40% 98%;

    /* 弹出层背景颜色 - 深灰色 */
    --popover: 222.2 84% 4.9%;

    /* 弹出层前景颜色 - 浅灰色（用于弹出层内的文字） */
    --popover-foreground: 210 40% 98%;

    /* 主色 - 亮蓝色 */
    --primary: 217.2 91.2% 59.8%;

    /* 主色前景颜色 - 深灰色（用于主色上的文字） */
    --primary-foreground: 222.2 47.4% 11.2%;

    /* 次色 - 深蓝色 */
    --secondary: 217.2 32.6% 17.5%;

    /* 次色前景颜色 - 浅灰色（用于次色上的文字） */
    --secondary-foreground: 210 40% 98%;

    /* 弱化背景颜色 - 深蓝色 */
    --muted: 217.2 32.6% 17.5%;

    /* 弱化前景颜色 - 灰色（用于辅助文字） */
    --muted-foreground: 215 20.2% 65.1%;

    /* 强调背景颜色 - 深蓝色 */
    --accent: 217.2 32.6% 17.5%;

    /* 强调前景颜色 - 浅灰色（用于强调文字） */
    --accent-foreground: 210 40% 98%;

    /* 警示色 - 深红色 */
    --destructive: 0 62.8% 30.6%;

    /* 警示前景颜色 - 浅灰色（用于警示文字） */
    --destructive-foreground: 210 40% 98%;

    /* 边框颜色 - 深蓝色 */
    --border: 217.2 32.6% 17.5%;

    /* 输入框背景颜色 - 深蓝色 */
    --input: 217.2 32.6% 17.5%;

    /* 聚焦环颜色 - 亮蓝色 */
    --ring: 224.3 76.3% 48%;

    /* 圆角半径 - 0.5rem */
    --radius: 0.5rem;

    --scrollbar-width: 12px;
    --scrollbar-track-color: #f1f1f1;
    --scrollbar-thumb-color: #888;
    --scrollbar-thumb-hover-color: #555;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}
